<template>
<!-- #ifdef APP-PLUS -->
<cell>
<!-- #endif -->
<view class="list-card padding sec-top">
	<image class="list-card-cover border-radius"
		src="/static/v2_qb8b4c.png"
		mode="aspectFill"
		@click="onItemClick('profile')" />
	<view class="list-card-content sec-left"
		@click="onItemClick('detail')">
		<view class="list-card-header">
			<view class="list-card-title">你可以叫小王吗？</view>
			<view class="list-card-time">2020-11-11 20:11:22</view>
		</view>
		<view class="list-card-body">
			Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
		</view>
		<view class="list-card-footer">
			<view class="list-action-item"
				@click.stop="onItemClick('forward')">
				<text class="iconfont icon-forward"></text>
				<text class="sec-left">1</text>
			</view>
			<view class="list-action-item"
				@click.stop="onItemClick('comment')">
				<text class="iconfont icon-comment"></text>
				<text class="sec-left">1</text>
			</view>
			<view class="list-action-item"
				@click.stop="onItemClick('collect')">
				<text class="iconfont icon-collect"></text>
				<text class="sec-left">1</text>
			</view>
			<view class="list-action-item"
				@click.stop="onItemClick('help')">
				<text class="iconfont icon-help"></text>
				<text class="sec-left">1</text>
			</view>
		</view>
		<view class="list-card-slot">
			<view class="list-slot-item">
				<text class="list-slot-name">小王</text>:
				<text class="sec-left">如何做好一个Hybird App？</text>
			</view>
			<view class="list-slot-item">
				<text class="list-slot-name">老师</text>
				<text class="sec-left">回复</text>
				<text class="list-slot-name sec-left">小王</text>:
				<text class="sec-left">Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。</text>
			</view>
		</view>
	</view>
</view>
<!-- #ifdef APP-PLUS -->
</cell>
<!-- #endif -->
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	methods: {
		onItemClick(type) {
			this.$emit('on-item', type);
		}
	}
}
</script>
